import React from 'react';
import { Flex, Image } from 'antd';
import { useDrag } from 'react-dnd';
import type { WidgetMaterial } from '../types/prevViewTypes';

import { useSelector } from 'react-redux';
import type { RootState } from '../types/theme';
import { themes } from '../utils/publicCss';

interface WidgetMaterialProps {
  materials: WidgetMaterial[];
}

const MaterialPanel: React.FC<WidgetMaterialProps> = ({ materials }) => {
  const user = useSelector((state: RootState) => state.user.theme);

  return (
    <div
      style={{
        borderRadius: 4,
        cursor: 'move',
        backgroundColor: themes[user].shadow,
      }}
    >
      {materials.map((material) => (
        <MaterialItem key={material.id} material={material} />
      ))}
    </div>
  );
};

interface MaterialItemProps {
  material: WidgetMaterial;
}

// 定义一个MaterialItem组件，接收一个MaterialItemProps类型的props参数
const MaterialItem: React.FC<MaterialItemProps> = ({ material }) => {
  // 从Redux中获取用户主题
  const user = useSelector((state: RootState) => state.user.theme);
  // 使用useDrag钩子，创建一个可拖拽的元素
  const [{ isDragging }, drag] = useDrag({
    // 拖拽的元素为material，类型为widget
    item: { ...material },
    type: material.type,
    // 收集拖拽状态
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  });

  // 返回一个div元素，包含一个可拖拽的元素
  return drag(
    <div
      // 设置背景颜色、透明度、内边距、边框半径、外边距
      style={{
        background: themes[user].background,
        opacity: isDragging ? 0.5 : 1,
        padding: 5,
        borderRadius: 5,
        marginTop: 10,
      }}
    >
      <div className="flex items-center">
        <div style={{ color: themes[user].color }}>
          <Flex gap="small" justify="space-between" align="center">
            <Flex>
              {/* 设置三个圆形的背景颜色 */}
              <span style={{ width: 10, height: 10, background: '#fc625d', borderRadius: 5 }}></span>
              <span style={{ width: 10, height: 10, background: '#fcbc40', borderRadius: 5 }}></span>
              <span style={{ width: 10, height: 10, background: '#34c749', borderRadius: 5 }}></span>
            </Flex>
            <div>{material.name}</div>
          </Flex>
          {/* 设置图片的宽度和高度 */}
          <Image width={170} height={140} src={material.img} />
        </div>
      </div>
    </div>
  );
};

export default MaterialPanel;
